<script lang="ts" setup>
import TabBar from "../index/components/tabBar/tabBar.vue";
import { ref } from 'vue';

const defaultAvatar = 'https://tdesign.gtimg.com/mobile/demos/example1.png';

const userInfo = ref({
  avatar: uni.getStorageSync('userAvatar') || defaultAvatar,
  nickname: uni.getStorageSync('userNickname') || '未登录',
  balance: 0,
  points: 0,
  coupons: 0
});

const orderMenu = [
  { icon: 'wallet', text: '待付款' },
  { icon: 'deliver', text: '待发货' },
  { icon: 'package', text: '待收货' },
  { icon: 'chat', text: '待评价' }
];

const serviceMenu = [
  { icon: 'heart', text: '我的收藏', badge: 0 },
  { icon: 'calendar', text: '预约记录', badge: 2 },
  { icon: 'pet', text: '宠物档案', badge: 0 },
  { icon: 'discount', text: '优惠券', badge: 5 },
  { icon: 'wallet', text: '我的钱包', badge: 0 },
  { icon: 'star', text: '我的积分', badge: 0 },
  { icon: 'chart', text: '学习进度', badge: 0 },
  { icon: 'service', text: '联系客服', badge: 0 }
];

const handleAvatarClick = () => {
  uni.navigateTo({ url: '/pages/my/profile' });
};

const assetKeys = ['balance', 'points', 'coupons'] as const;
</script>

<template>
  <view class="page-container bg-gray-100 min-h-screen pb-[120rpx]">
    <!-- 顶部用户信息卡片 -->
    <view class="user-header">
      <view class="user-info-card" @click="handleAvatarClick">
        <t-avatar 
          :image="userInfo.avatar" 
          size="large" 
          class="user-avatar"
        />
        <view class="user-info">
          <text class="nickname">{{ userInfo.nickname }}</text>
          <text class="edit-hint">点击编辑个人资料 ></text>
        </view>
      </view>

      <!-- 资产信息 -->
      <view class="assets-card">
        <view 
          v-for="(item, index) in ['钱包余额', '积分', '优惠券']" 
          :key="index"
          class="asset-item"
        >
          <text class="amount">{{ userInfo[assetKeys[index]] }}</text>
          <text class="label">{{ item }}</text>
        </view>
      </view>
    </view>

    <!-- 订单状态 -->
    <t-cell-group title="我的订单" class="menu-card">
      <t-grid class="order-grid">
        <t-grid-item
          v-for="(item, index) in orderMenu"
          :key="index"
          :icon="item.icon"
          :text="item.text"
          class="order-item"
        />
      </t-grid>
    </t-cell-group>

    <!-- 服务菜单 -->
    <t-cell-group title="我的服务" class="menu-card">
      <t-grid column="4" class="service-grid">
        <t-grid-item
          v-for="(item, index) in serviceMenu"
          :key="index"
          :icon="item.icon"
          :text="item.text"
          :badge-props="{ count: item.badge }"
          class="service-item"
        />
      </t-grid>
    </t-cell-group>

    <!-- 底部菜单 -->
    <t-cell-group class="menu-card">
      <t-cell title="设置" hover arrow />
      <t-cell title="帮助中心" hover arrow />
      <t-cell title="关于我们" hover arrow />
    </t-cell-group>

    <TabBar />
  </view>
</template>

<style lang="scss">
.page-container {
  --td-cell-group-title-padding: 32rpx 32rpx 16rpx;
  padding-bottom: env(safe-area-inset-bottom);
}

.user-header {
  background: linear-gradient(to bottom, var(--primary-color), #ffffff);
  padding: 40rpx 32rpx;
  margin-bottom: 24rpx;
}

.user-info-card {
  display: flex;
  align-items: center;
  padding: 20rpx 0 40rpx;

  .user-avatar {
    width: 120rpx !important;
    height: 120rpx !important;
    border: 4rpx solid #fff;
    border-radius: 50%;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  }

  .user-info {
    margin-left: 24rpx;
    
    .nickname {
      font-size: 36rpx;
      font-weight: 600;
      color: #fff;
      display: block;
      margin-bottom: 8rpx;
    }

    .edit-hint {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.9);
    }
  }
}

.assets-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .asset-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .amount {
      font-size: 40rpx;
      font-weight: 600;
      color: var(--primary-color);
      margin-bottom: 8rpx;
    }

    .label {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.menu-card {
  margin: 24rpx 24rpx 0;
  border-radius: 16rpx;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

  :deep(.t-cell-group__title) {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
}

:deep(.t-grid) {
  .t-grid-item {
    &__content {
      padding: 32rpx 16rpx;
    }
    
    &__icon {
      font-size: 48rpx;
      color: var(--primary-color) !important;
    }
    
    &__text {
      font-size: 26rpx;
      margin-top: 12rpx;
      color: #333;
    }
  }
}

:deep(.t-cell) {
  --td-cell-horizontal-padding: 32rpx;
  
  .t-icon {
    color: var(--primary-color);
    font-size: 40rpx;
  }
}

:deep(.t-icon) {
  color: var(--primary-color) !important;
}
</style>
